<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body>
<div id="app" class="container" style="padding-bottom:20px;background-image: url('../../image/user_bg_head.png');background-size: 100% 100px;background-repeat:no-repeat;" v-cloak>
    <div class="user-top-container" :style="userCard">
      <div class="user-top-container-top">
        <div class="shop-avatar" v-myclick="clickUsername">
          <img :src="user.portrait || '../../image/portrait_moren.png'">
        </div>
        <div class="shop-title">
          <div class="shop-name" v-myclick="clickUsername">{{user.nickname || '点击登录'}}</div>
          <div class="shop-level">
            <span class="level_name_content">{{user.level_name}}</span>
            <span class="authentication" v-if="user.is_default_level==0&&user.is_company==1" :class="{'authentication-active':user.is_company==1}">{{user.is_company==1?'已认证':'未认证'}}</span>
          </div>
        </div>
        <div class="shop-user-data">
          <div v-myclick="submember">
            <span class="data-count">{{user.sub_member_count_l2_l3+user.sub_member_count_l1}}</span>
            <span class="data-title">我的社群（人）</span>
          </div>
          <div>
            <span class="data-count">{{user.cur_month_team_consume || 0 | double }}</span>
            <span class="data-title">推荐奖励</span>
          </div>
          <div v-myclick="subshop">
            <span class="data-count">{{user.sub_shop_count_l1}}</span>
            <span class="data-title">我的直推</span>
          </div>
        </div>
      </div>
      <div class="user-top-container-bottom">
        <div class='bottom-user-name' v-if="user.is_default_level=='0'">服务商</div>
        <div class='bottom-user-shop' style="color:#ffffff;border:1px solid #ffffff" v-myclick="addshop" v-if="user.is_default_level=='1'">成为服务商</div>
        <div class="bottom-user-level" v-if="user.is_default_level=='0'">{{user.train_level_name}}</div>
        <div class="bottom-user-seemore" v-myclick="privilege" v-if="user.level_id !== '7' && user.level_id !== '8'">更多福利>></div>
      </div>
    </div>
    <div class="user-middle-container">
      <div class="user-middle-container-top" v-if="user.is_default_level=='0'">
          <span style="color: #ababab;font-size:12px">可提现收益(元)</span>
          <span style="font-size:20px;color: #e85407;padding-left:15px;">{{user.balance || 0 | double}}</span>
          <span class="user-span-right" :class="BSImg" v-myclick="withdraw">提现</span>
      </div>
      <div class="user-middle-container-top" v-if="user.is_default_level!=='0'">
          <span>我的收益</span>
          <!-- <span class="user-span-right" :class="BSImg" v-if="user.is_default_level=='1'" v-myclick="openIncomes">查看明细</span> -->
      </div>
      <div class="user-middle-container-bottom">
        <div style="border-bottom:1px solid #eeeeee;border-right:1px solid #eeeeee">
          <span>{{user.cur_month_profit || 0 | double}}</span>
          <span>待解冻</span>
        </div>
        <div style="border-bottom:1px solid #eeeeee">
          <span>{{user.last_month_profit || 0 | double}}</span>
          <span>待确认</span>
        </div>
        <div v-myclick="openIncomes">
          <span>{{user.total_profit || 0 | double}}</span>
          <span>累计收益</span>
        </div>
        <div v-myclick="withdraw" style="border-left:1px solid #eeeeee">
          <span>{{user.balance || 0 | double}}</span>
          <span>可转账金额</span>
        </div>
      </div>
    </div>

    <div class="user-bottom" v-if="user.level_id !== '7' && user.level_id !== '8'">
        <div class="user-bottom-top">
            <span>我的订单</span>
            <span class="user-span-right" :class="BSImg" v-myclick="[0, openOrders]">查看全部</span>
        </div>
        <div class="user-bottom-bottom">
            <a v-myclick="[1, openOrders]">
                <img v-src="'../../image/user_btn_paid.png'">
                <p>已付款</p>
            </a>
            <a v-myclick="[2, openOrders]">
                <img v-src="'../../image/user_btn_received.png'">
                <p>已收货</p>
            </a>
            <a v-myclick="[3, openOrders]">
                <img v-src="'../../image/user_btn_settled.png'">
                <p>已失效</p>
            </a>
            <a v-myclick="[4, openOrders]">
                <img v-src="'../../image/user_btn_doing.png'">
                <p>处理中</p>
            </a>
        </div>
    </div>
    <div class="user-qrcode" style="text-align: center;" v-show="qrcode">
        <div class="user-qrcode-top">
            <span>我的邀请码：{{user.invite_code}}</span>
            <span class="user-span-right" :class="BSImg" v-myclick="[user.invite_code, copyInvite]">复制邀请码</span>
        </div>
        <div class="user-qrcode-middle">
            <div class="user-qrcode-middle-left">
                <img :src="qrcode">
            </div>
            <div class="user-qrcode-middle-right">
              <p>只要好友通过链接注册成功，您就可以得到相应的分享奖励以!</p>
            </div>
        </div>
        <div class="user-qrcode-bottom">
            <a v-myclick="['timeline', share_wx]">
                <img v-src="'../../image/share_btn_moments.png'">
                <p>朋友圈</p>
            </a>
            <a v-myclick="['session', share_wx]">
                <img v-src="'../../image/share_btn_wechat.png'">
                <p>微信好友</p>
            </a>
            <a v-myclick="share_qq">
                <img v-src="'../../image/share_btn_qq.png'">
                <p>QQ好友</p>
            </a>
        </div>
    </div>
    <div class="footer-user-content">
      <div class="footer-service" v-myclick="initMeiQia">
        <img v-src="'../../image/user_icon_service.png'">
        <span>客服</span>
      </div>
      <div class="footer-helps" v-open-win vurl="help" >
        <img v-src="'../../image/user_icon_help.png'">
        <span>帮助</span>
      </div>
    </div>

</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>

    var user,
        qrcode,
        scanner,
        wx,
        qq,
        clipBoard,
        vm;

    var mq;
    apiready = function () {
        setBSImg();
        scanner = api.require('FNScanner');
        clipBoard = api.require('clipBoard');
        mq = api.require('meiQia');
        if (getPrefs('token')) {
            showProgress();
            var data = {
                member_id: getPrefs('member_id')
            };
            var callback = function (ret) {
                user = ret.content;
                // console.log(JSON.stringify(user));
                qrcode = user.qrcode;
                setPrefs('user', user);
                encodeImg(qrcode);
            };
            pinet.post(URL.getUserinfo, data, callback);
        } else {
            user = {};
            qrcode = {};
            initApp();
            api.parseTapmode();
        }

        addListeners();
        setUserRefreshHeaderInfo(refresh);
    };

    function encodeImg(qrcode) {
        scanner.encodeImg({
            content: qrcode,
            saveImg: {
                path: 'fs://qrcode.png',
                w:400,
                h:400
            }
        }, function (ret) {
            qrcode = {};
            if(ret.status){
               qrcode = ret.imgPath;
            }
            initApp(qrcode);
            listenUpdUser(vm.user);
            api.parseTapmode();
        })
    }

    function initApp(qrcode) {
        vm = new Vue({
            el: '#app',
            data: {
                user: user,
                qrcode: qrcode,
                imgPath: '../../image/',
                tips: {
                    balance: false,
                    total: false,
                    hasCal: false,
                    unCal: false,
                    wait: false,
                },
                appInstalled: {
                    wx: true,
                    qq: true,
                },
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small',
                },
            },
            computed: {
                memberStyle: function () {
                    return getMemberStyle(this.user.level_id)
                },
                userCard: function () {
                    return {
                        backgroundImage: 'url(' + this.imgPath + Vue.BSImg + '/' + this.memberStyle.usercard_bg + ')',
                    }
                },
                changeColor: function () {
                    return {
                        color: this.memberStyle.changeColor
                    }
                },
                usercard_change: function () {
                    return this.imgPath + Vue.BSImg + '/' + this.memberStyle.usercard_change;
                },
            },
            methods: {
                clickUsername: function () {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    openWin('userinfo')

                },
                addshop: function(){
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }
                  openWin('level_up')
                },
                subshop: function(){
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }
                  onEvent('查看店铺');
                  openWin('subshop')
                },
                submember: function(){
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }
                  onEvent('查看社群');
                  openWin('submember')
                },
                privilege: function(){
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }
                  onEvent('查看特权');
                  openWin('privilege', {user: user})
                },
                showWechatPrompt: function(){
                  api.alert({
                      title: '获取更多信息提示',
                      msg: '请关注"集脉鑫城"公众号获取更多信息',
                      buttons: ['确定']
                  }, function (ret, err) {});
                },
                showincome: function(){
                  api.alert({
                      title: '收益详情',
                      msg: "分享收益：12.00,推广奖励：12.00",
                      buttons: ['确定']
                  }, function (ret, err) {});
                },
                openMember_level: function () {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    openWin('member_level');
                },
                showTips: function (tips) {
                    onEvent('帮助说明问号图标点击');
                    for (var i in vm.tips) {
                        if (i == tips) {
                            vm.tips[i] = !vm.tips[i];
                        } else {
                            vm.tips[i] = false;
                        }
                    }
                    api.addEventListener({
                        name: 'tap'
                    }, function () {
                        vm.tips[tips] = false;
                        api.removeEventListener({
                            name: 'tap'
                        });

                    });
                },
                changeUser: function () {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    onEvent('切换职位点击');
                    openWin('changeUser');

                },
                activate: function () {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    onEvent('激活按钮点击');
                    openWin('activate');

                },
                withdraw: function () {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    if(user.balance==0){
                      return;
                    }
                    onEvent('提现点击');
                    openWin('withdraw');
                },
                openIncomes: function (keyState) {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    if (!keyState) {
                        onEvent('总收益点击');
                    } else {
                        switch (keyState) {
                            case 1:
                                onEvent('待结算收益点击');
                                break;
                            case 2:
                                onEvent('已结算总收益点击');
                                break;
                            case 3:
                                onEvent('不可提现收益点击');
                                break;
                        }
                    }
                    openWin('../ledger/total_income', {keyState: keyState || ''});
                },
                openOrders: function (state) {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    switch (state) {
                        case 0:
                            onEvent('查看全部点击');
                            break;
                        case 1:
                            onEvent('已付款点击');
                            break;
                        case 2:
                            onEvent('已收货点击');
                            break;
                        case 3:
                            onEvent('已失效点击');
                            break;
                        case 4:
                            onEvent('处理中点击');
                            break;
                    }
                    openWin('../order/my_order', {state: state});
                },
                initMeiQia: function () {
                    showMeiQia();
                },
                copyInvite: function (text) {
                    clipBoard.set({
                        value: text
                    }, function (ret) {
                        if (ret) {
                            api.toast({
                                msg: '已复制到剪贴板',
                            });
                        }
                    });
                },
                share_wx: function (scene) {
                   var that = this;
                    if(!that.appInstalled.wx){
                      api.alert({
                          title: '提示',
                          msg: '未能检测到本地微信',
                          buttons: ['确定']
                      }, function (ret, err) {});
                    }else{
                      share_wx(scene, vm.user.share);
                    }
                },
                share_qq: function () {
                  var that = this;
                  if(!that.appInstalled.qq){
                    api.alert('未能检测到本地QQ');
                  }else{
                    share_qq(vm.user.share);
                  }
                },
            },
            created: function () {
            }
        })
    }

    function refresh() {
        if (getPrefs('token')) {
            var data = {
                member_id: getPrefs('member_id')
            };
            var callback = function (ret) {
                user = ret.content;
                qrcode = user.qrcode;
                setPrefs('user', user);

                if (vm) {
                    vm.user = user;

                    scanner.encodeImg({
                        content: qrcode,
                        saveImg: {
                            path: 'fs://qrcode.png',
                            w:400,
                            h:400
                        }
                    }, function (ret) {
                        vm.qrcode = {};
                        if(ret.status){
                            vm.qrcode = ret.imgPath;
                        }
                    });
                } else {
                    initApp();
                    api.parseTapmode();
                }
                api.refreshHeaderLoadDone();
            };
            var errback = function () {
                api.refreshHeaderLoadDone();
            };
            pinet.post(URL.getUserinfo, data, callback, errback);
        } else {
            api.refreshHeaderLoadDone();
        }

    }

    function addListeners() {
        api.addEventListener({
            name: 'reLogin'
        }, refresh);

        api.addEventListener({
            name: 'level_up'
        },
        function () {
            refresh();
        }
      );

        api.addEventListener({
            name: 'register'
        }, refresh);

        api.addEventListener({
            name: 'viewappear'
        }, function (ret, err) {
          if (getPrefs('token')) {
            user = JSON.parse(getPrefs('user'));
            if (user.hasPortraitUpd) {
                vm.user.portrait = user.portrait;
                user.hasPortraitUpd = false;
                setPrefs('user', user);
            }
          }
        });
    }

</script>
</html>